<template>
  <div class="container m-3">
    <div class=" border rounded-3 p-3 shadow m-3">
      <p>内联事件处理器</p>
      <button @click="count++" class="btn btn-outline-primary btn-sm">点击数：{{ count }}</button>
    </div>
    <div class="border rounded-3 p-3 shadow m-3">
      <p>方法事件处理器</p>
      <button @click="add" class="btn btn-outline-primary btn-sm">浏览数：{{ view }}</button>
    </div>
    <div class="border rounded-3 p-3 shadow m-3">
      <p>事件传参</p>
      <button class="btn btn-primary" @click="showMe('aa')">点击</button>
    </div>
    <div class="border rounded-3 p-3 shadow m-3">
      <div class="list-group">
        <a href="#" @click="foo(item.name,$event)" class="list-group-item list-group-item-action"
           v-for="(item,index) of users"
           :key="item.id">{{ item.name }}</a>
      </div>
    </div>
    <div class="m-3 p-3 border rounded-3 shadow">
      <p>事件修饰符</p>
      <a href="http://www.baidu.com" @click="baiduJump">百度</a>
      <a href="http://www.baidu.com" @click.prevent="baiduJump2">百度</a>
      <p>事件冒泡</p>
      <div @click="eventPop('最外层',$event)">
        <button @click="eventPop('最内层',$event)" class="btn btn-success m-3">点击了</button>

        <button @click.stop="eventPop('最内层',$event)" class="btn btn-success">点击了</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  data() {//函数
    return {
      count: 0,
      view: 0,
      users: [
        {id: 1, name: '张三'},
        {id: 2, name: '李四'},
        {id: 3, name: '王五'},
      ]
    }
  },
  //方法
  methods: {//对象
    add(e: Event) {
      console.log(e)
      console.log("浏览数+1")
      const target = e.target as HTMLElement;
      target.innerHTML = "add" + this.view++;

      this.view++;
    },
    showMe(msg: string) {
      console.log(msg)
    },
    foo(name: string, e: Event) {
      console.log(e)
      console.log(name)
    },
    baiduJump(e: Event) {
      e.preventDefault();//能过event事件阻止默认事件
      console.log("6666")
    },
    baiduJump2(e: Event) {
      console.log("66662")
    },
    eventPop(msg: string, event: Event) {
      // event.stopPropagation()//阻止事件冒泡
      console.log(`事件${msg}点击了`)
    }
  }
}
</script>


